<script setup lang="js">
import {onMounted,ref,computed} from "vue";
import {useMapAddress} from "../stores/mapAdress.js";


const store = useMapAddress()
let map =null
let geocoder = null
//中心
let  center = store.getCenter()

//图标
const icon = new T.Icon({
  iconUrl:"../../../../public/images/mapIcon.png",
  iconSize:new T.Point(40,45),

    }
)
// const geoJsonPoint ={
//   type:"Point",
//   coordinates:[]
// }
//输入的地址信息
const inputAddress = ref('')
//要有的地址信息
const mapPointsAddress =store.getMapList

//经纬度转化为Marker对象
const arrayMarks = []

//经纬度集合
const mapPoints = ref([])
const setCenter = () => {
  center =store.center
}
//绘制点位,可以聚合
const showPoints=(mapPoints)=>{
  //聚合maskers
  for(const marks of mapPoints){
    let marker = new T.Marker(marks,{icon:icon})
    map.addOverLay(marker)
    arrayMarks.push(marker)
  }
  const markers = new T.MarkerClusterer(map,{
    markers: arrayMarks,
    maxZoom:13,
    gridSize:60,
    minimumClusterSize:2,
  })

}
//根据地址寻找地理位置的回调函数
function searchResult(result) {
  if (result.getStatus() === 0) { // 状态码0表示成功
    store.setCenterStore(result.getLocationPoint())
    map.panTo(result.getLocationPoint(), 15);
    // 地图平移到目标位置，缩放至16级
    let  marker = new T.Marker(result.getLocationPoint()); // 创建标记
    map.addOverLay(marker); // 添加标记到地图
  } else {
    alert(result.getMsg()); // 显示错误信息
  }
}
//寻找
function search() {

  const address = inputAddress.value
  geocoder.getPoint(address, searchResult); // 调用地理编码API
}
//转化和绘制标注
const convertAddressListAndPain =(mapPointsAddress)=>{
  const total =mapPointsAddress.length
  let  count =0;
  for(const address of mapPointsAddress){

    geocoder.getPoint(address,(result)=>{
      if(result.getStatus() === 0){
        let  markerAddress = result.getLocationPoint()

        mapPoints.value.push(markerAddress)
      }
      count++;
      if(total === count ){
        setTimeout(()=>
            showPoints(mapPoints.value),300
        );
      }
    })

  }

}
onMounted(() => {

  initMap()
  convertAddressListAndPain(mapPointsAddress)
})
const initMap = () => {
  const T = window.T;
  map = new T.Map("tian-map",{
    projection: "EPSG:900913",
    minZoom:13,
    maxZoom:18,
    zoom:15,
  })
  geocoder = new T.Geocoder();
  map.centerAndZoom(new T.LngLat(center.lng,center.lat),15)
  map.isScrollWheelZoom(true)
}
//初始化地图

</script>

<template>
  <div id="tian-map">
  </div>
  <div>
    <input type="text" placeholder="请输入你的寻找的地址" v-model="inputAddress" @keydown.enter="search">
    <input type="button" value="搜索" @click="search">
  </div>
</template>

<style scoped lang="less">
#tian-map {

  width: 100%;
  height: 800px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

input[type="text"] {
  padding: 10px 14px;
  width: 300px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-right: 10px;
  outline: none;
  transition: border-color 0.3s;
}

input[type="text"]:focus {
  border-color: #409eff; /* Vue 蓝 */
}

input[type="button"] {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #409eff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="button"]:hover {
  background-color: #337ecc;
}

div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

</style>